<!DOCTYPE html>
<!-- saved from url=(0060)http://fantaghiro.github.io/miaov/JS_Basic_Lessons/12-3.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>图片排序</title>
	<style>
		html, body, ul, h2 {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		#btn {
			width: 1008px;
			height: 60px;
			background: #F1F1F1;
			margin: 0 auto;
			text-align: center;
		}
		#btn li {
			display: inline-block;
			background: #009999;
			color: #fff;
			padding: 8px 20px;
			font-size: 14px;
			font-weight: bold;
			font-family: '微软雅黑';
			margin-top: 12px;
			cursor: pointer;
		}
		#btn li:hover {
			opacity: 0.5;
		}
		#showbox {
			width: 988px;
			margin: 0 auto;
			background: #f1f1f1;
			overflow: hidden;
			padding: 10px;
		}
		#showbox li {
			float: left;
			padding: 10px;
			background: #fff;
			border: 1px solid #f1f1f1;
		}
		h2 {
			font-family: '微软雅黑';
			font-size: 16px;
			font-weight: bold;
			color: #00518D;
			text-align: center;
			background: #f1f1f1;
			padding-top: 5px;
			padding-bottom: 5px;
		}
	</style>
	<script>
		window.onload = function(){

			var aBtn = document.getElementById('btn').getElementsByTagName('li'),
				oShowbox = document.getElementById('showbox'),
				aLi = oShowbox.getElementsByTagName('li'),
				flag = true,
				arr = [],
				str = '';

			for(var i=0; i<aLi.length; i++){
				arr.push(aLi[i]);
			}

			aBtn[0].onclick = function(){
				
				arr.reverse();			
				
				str = '';
				for(var i=0; i<arr.length; i++){
					
					str += '<li>' + arr[i].innerHTML + '</li>';
				}
				oShowbox.innerHTML = str;

				this.innerHTML = flag ? '从小到大' : '从大到小';
				flag = !flag;
			}

			aBtn[1].onclick = function(){
				var arr2 = [];
				for(var i=0; i<aLi.length; i++){
					arr2.push(aLi[i]);
				}
				arr2.sort(function(a, b){
					return Math.random() - 0.5;
				})
				
				str = '';
				for(var i=0; i<arr2.length; i++){
					
					str += '<li>' + arr2[i].innerHTML + '</li>';
				}
				oShowbox.innerHTML = str;
			}
			

			

				
				

		}
	</script>
</head>
<body>
	<ul id="btn">
		<li>从大到小</li>
		<li>打乱顺序</li>
	</ul>
	<ul id="showbox">
		<li>
			<img src="./图片排序_files/01.jpg">
			<h2>1-温馨办公</h2>
		</li>
		<li>
			<img src="./图片排序_files/02.jpg">
			<h2>2-游戏桌面</h2>
		</li>
		<li>
			<img src="./图片排序_files/03.jpg">
			<h2>3-汽车摇滚</h2>
		</li>
		<li>
			<img src="./图片排序_files/04.jpg">
			<h2>4-狭路相逢</h2>
		</li>
		<li>
			<img src="./图片排序_files/05.jpg">
			<h2>5-棒球小子</h2>
		</li>
		<li>
			<img src="./图片排序_files/06.jpg">
			<h2>6-球鞋动力</h2>
		</li>
		<li>
			<img src="./图片排序_files/07.jpg">
			<h2>7-游戏官网</h2>
		</li>
		<li>
			<img src="./图片排序_files/08.jpg">
			<h2>8-指尖社区</h2>
		</li>
	</ul>

<div id="__nightingale_view_cover" style="width: 100%; height: 100%; transition: -webkit-transform 10s ease-in-out; position: fixed !important; left: 0px !important; bottom: 0px !important; overflow: hidden !important; pointer-events: none !important; z-index: 2147483647; opacity: 0; background: rgb(0, 0, 0) !important;"></div></body></html>